<template>
    <div class="box">
        <h2>v-model</h2>

        <h4>v-model</h4>
        <input type="text" v-model="keyword">

        <h4>不使用v-model</h4>
        <!--
            blur事件 失焦就会触发
            change事件 值改变,且失焦,才会触发
            input事件 只要发生变化就会触发
        -->
        <input type="text" :value="keyword" @input="keyword = $event.target.value">
    
        <h4>组件实现步骤2</h4>
        <!--
            数据流向:
            1. 给子组件绑定 value 值是keyword,相当于数据 keyword 流向了子组件
                子组件拿到这个keyword在页面中展示了,也在input框展示了
            2. 当子组件input框内容发生变化的时候,此时拿到输入的值,使用$emit触发自定义事件
                将input输入的值传给父组件
            3. 父组件在接收到子组件传过来的数据的时候,赋值给了 keyword
            4. 此时keyword发生了改变,再次传递给子组件进行展示
        -->
        <CustomeInput :value="keyword" @input="keyword = $event"></CustomeInput>


        <CustomeInput v-model="keyword"></CustomeInput>
    </div>
</template>

<script>
// v-model
// 1.v-model之前都学习过,用于表单元素,双向数据绑定,收集表单的数据
// input输入的内容一旦发生改变,keyword收集的数据就会发生变化,使用的是 v-model 指令实现的
// 2. 问题:
//      如果不使用 v-model 能不能实现刚刚的效果(input输入的内容一旦发生改变,keyword就变化)?
//    可以:
//      <input type="text" :value="keyword" @input="setKeyword">
//      :value="keyword"  input框显示内容
//      @input  修改字段keyword
//    结论:
//      input框实现和v-model一样的效果需要满足两个条件: 1. :value  2. @input
// 3. 组件也可以使用v-model,组件的v-model需要自己实现,我们猜测 组件的v-model 实现 和 步骤2 条件一样
//      先自己实现一下这个组件
//      <CustomeInput :value="keyword" @input="keyword = $event"></CustomeInput>
// 4. 由于我们猜测 组件使用的 v-model 指令和 步骤2的相同,我们把步骤2的条件实现了一下
//      此时把组件的 :value 和 @input 替换成 v-model 变成如下样子
//      <CustomeInput v-model="keyword"></CustomeInput>
//      测试发现,这样也好用
// 犟嘴1:
//      把组件上的input事件换一个其他的行不行
//      不行,我们测试之后发现把组件上的input换成其他自定义事件, 组件上的 v-model 指令不好使
// 犟嘴2:
//      能不能把传入参数的:value改变一下, props传参也可以用其他参数啊,必须用value吗?
//      不能, :value 我们替换成了 :qwerdf 这个属性,发现使用 v-model指令,子组件接不到这个参数,无法展示
// 结论:
//      v-model指令用于组件,组件[必须]实现两个条件
//      1.  :value  --- 目的是给子组件传参(可以用作展示)
//      2.  @input  --- 触发input自定义事件修改数据的
// 组件使用v-model是为了让调用组件的人省劲呢,封装当前这个组件的人并不省劲
// 所以调用的时候使用v-model,封装这个组件的人必须给组件实现这两个条件: 1. :value  2. @input
// v-model组件上使用哪里见过:
//      在element ui 中的 el-input组件,使用的就是 v-model 指令
//      他这个组件在实现的时候,一定实现了这两个条件  1. :value  2. @input
// 场景:
//      一般情况下,封装组件的时候,封装的是input框,此时使用 v-model 比较合适
// 补充:
//      v-model 在组件上使用,是父子组件之间的数据同步
// 犟嘴3:
//      子组件能不能不用input
//      可以
import CustomeInput from './CustomInput.vue'
export default {
    name: "ModelTest",
    components: { CustomeInput },
    data() {
        return {
            keyword: 'i love you'
        }
    },
    methods: {
        // setKeyword(e) {
        //     this.keyword = e.target.value;
        // }
    }
}
</script>

<style scoped>

</style>